<template>
  <div class="brand-container">
    <div class="map-background"></div>
    <div class="wrap">
      <header>
        <h2>品牌标题</h2>
        <div class="weather">
          <img src="../assets/img/weather.png" alt="Weather Icon"/>
          <span class="tem">25°C</span>
        </div>
        <div class="showTime">
          <span class="time">12:00</span>
          <div class="date">
            <span>2024-08-06</span>
            <span>星期一</span>
          </div>
        </div>
      </header>

      <div class="mainbox">
        <div class="item left panel">
          左侧组件内容
        </div>
        <div class="item center panel">
          中间组件内容
        </div>
        <div class="item right panel">
          右侧组件内容
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.brand-container {
  position: absolute;
  width: 100%;
  height: 100%;

  .map-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; // Ensure it's behind other components
  }

  .wrap {
    line-height: 1.15;

    header {
      position: relative;
      height: 1rem;
      background: url(../assets/img/brand/head_bg.png) no-repeat top center;
      background-size: 100% 100%;

      h2 {
        margin-bottom: 0;
        color: #7ef0ff;
        font-size: 0.475rem;
        text-align: center;
        line-height: 0.75rem;
        letter-spacing: 1px;
      }

      .weather {
        position: absolute;
        left: 1.375rem;
        top: 0.35rem;
        font-size: 0.25rem;
        color: rgba(126, 240, 255, .7);

        img {
          width: .45rem;
        }

        span {
          display: inline-block;
        }

        .tem {
          margin: 0 .1rem 0 .2rem;
        }
      }

      a {
        text-decoration: none;
        color: inherit;
      }

      .showTime {
        position: absolute;
        right: 1.375rem;
        top: 0.5rem;
        color: rgba(126, 240, 255, .7);
        display: flex;

        .time {
          font-size: .28rem;
          margin-right: .18rem;
        }

        .date {
          span {
            display: block;
            font-size: .22rem;
            margin-bottom: .05rem;
          }
        }
      }
    }

    .mainbox {
      min-width: 1024px;
      max-width: 1920px;
      padding: 0.125rem 0.125rem 0;
      display: flex;
      justify-content: space-between;

      .item {
        flex: 1; // Flex-grow to take up remaining space
        margin: 0 0.125rem 0.1rem;
        overflow: hidden;

        &.center {
          flex: 5; // Center item takes up more space
          margin: 0 0.125rem 0.1rem;
        }

        &.left, &.right {
          min-width: 300px;  // Ensure minimum width for left and right items
        }
      }

      .panel {
        position: relative;
        height: 3.875rem;
        border: 1px solid rgba(25, 186, 139, 0.17);
        background: rgba(255, 255, 255, 0.04) url(../assets/img/brand/line.png);
        padding: 0 0.1875rem 0;
        margin-bottom: 0.1875rem;
        min-height: 100px;  // Ensure minimum height for panels
      }

      .map {
        position: relative;
        height: 300px;  // Ensure minimum height for map
      }
    }
  }
}
</style>
